<template>
  <li class="aui-list-item  cjy-appear  cjy-aui-list-item" style=" position:relative;width:100%;background: white "
      ref="listItem"
      :class="{'cjy-opacity':!isShow}">
    <!-- <div v-if="inActivity" @click="gotoDetail">
      <em class="cjy-recommend-lable">
        <div></div>
      </em>
      <span class="cjy-recommend-lable-div" style="position: absolute;z-index: 5">超值<br>促销</span>
    </div> -->

    <div class="aui-media-list-item-inner" style="padding-left:5.25rem;position:relative" @click="gotoDetail">
      <div class="aui-list-item-media"
           style="height: 5.25rem;width:5.25rem;padding:0 ;overflow: hidden;position:absolute;left: 0">
        <img v-lazy="mainPic" style="width: 100%;height: 100%">
      </div>
      <div class="suggest" style="width:100%;padding: 0 0 0 0.75rem; overflow: hidden">
        <h3 class="cjy-text-overflow"
            style="width:100%; text-align: left;vertical-align:middle;height: 1.3rem;line-height: 1.3rem ;margin:0; font-size: 0.7rem ;color: black"
            @click="gotoDetail">
          <label :class="{[featureClass]:true}" style="height:1.3rem;box-sizing: border-box;">{{featureName}}</label>
          {{goodsName}}
        </h3>

        <p class="cjy-text-overflow" style="display: flex; justify-content:space-between">
          <span class="cjy-sec-title">{{subTitle}}&nbsp;</span>
          <label class="delivery_time" v-if="goodsDeliveryType">
            <i class="icon njfont nj-dengdai"></i>
            明日送达
          </label>
        </p>


        <div class="label_con">
          <div class="label_left">
            <h4 class="cjy-min-screen" style="color: black">{{labellistFir || "&nbsp;"}}</h4>
            <p style="font-size: 0.6rem">{{labellistThir || "&nbsp;"}}</p>
          </div>
          <div class="middle_line"><em v-if="labellistFir||labellistThir||labellistSec||labellistFor"></em></div>
          <div class="label_right">
            <h4 class="cjy-min-screen" style="color: black">{{labellistSec || '&nbsp;'}}</h4>
            <p style="font-size: 0.6rem">{{labellistFor || '&nbsp;'}}</p>
          </div>
        </div>


        <p style="text-align: left;height: 1.2rem;line-height:1.2rem;font-size: 0.6rem">
          <span style="vertical-align: bottom;line-height: 1.2rem;">
            ¥<em style="font-size: 0.9rem;display: inline-block;font-size: 0.8rem">
            {{changePrice(showWsPrice) || "&nbsp;"}}
          </em><em v-if="showUnit"
                   style="color:rgb(154, 154, 154);font-size: 0.9rem;display: inline-block;font-size: 0.8rem">
            /
          </em></span>{{showUnit ? showUnit : "&nbsp;"}}
        </p>


      </div>


    </div>
    <div v-if="!islast"
         style=" position: absolute;width: 12rem;bottom:0;border-bottom:1px solid rgb(234, 234, 234);height: 0;right: 0"></div>

    <div style="width:8rem;height:3rem;position:absolute;right:0;bottom:0">
      <div style="position: absolute;bottom:0.8rem; right: 0.7rem;height: 1.3rem;width: 0rem;">
        <update-cart v-if="goodsId"
                     :addCartButtonType="0"
                     :commodityInfor="comInfor"
                     :goodsId="goodsId">
          <div class="cjy-add-cart-button-box"
               slot="button" slot-scope="props"
               @click="cartButtonOnClick">
            <button-change-cart :type="buttonType" fontSize="1.6rem" :style="buttonStyle">
            </button-change-cart>
          </div>
        </update-cart>
      </div>
    </div>
  </li>


</template>

<script>
  //   import Hello from './components/Hello'
  import UpdateCart from '../UpdateCart'
  // import lazyLoad from 'vue-lazyload'
	import { NAVIGATE } from '@/config/postMessage-types.js'
  import ButtonChangeCart from '@/components/ButtonChangeCart/icon'

  export default {
    data() {
      return {
        featureLabelList: null, // 类名查询表
        featureClass: '',//特色标签css类名
        goodsCode: "",  //产品分类
        enterpriseName: "宁家",  // 商家名称
        goodsId: "",   //产品ID
        goodsName: "", //产品名称
        goodsPrice: "", //产品价格
        goodsUnit: "", //产品单位
        city: "", //产地
        shopName: "", //商店名称
        saleqty: "", //库存
        goodsModel: "", // 商品型号
        goodsType: 0, //售价
        normalPrice: "1.00", //原价
        mainPic: null, //主图缩略图
        featureLabel: 0, //特色标签
        featureName: '',
        subTitle: '',
        top: 0,
        height: 0,
        goodsDeliveryType: '',
        isShow: true,
        showWsPrice: 0,
        showUnit: '',
        eachPrice: 0,
        inActivity: 0,
        labellistFir: '',
        labellistSec: '',
        labellistThir: '',
        labellistFor: '',
        buttonType:'2',
        buttonStyle: {
					backgroundColor: '',
					color: '#EF5423'
				},
      }
    },
    components: {UpdateCart,ButtonChangeCart},
    props: {
      ListTop: {
        type: Number,
        default: 140
      },
      detail: {
        type: Object,
        default: () => null
      },
      comInfor: {
        type: Object,
        default: () => ({})
      },
      topHeight: {
        type: Number,
        default: 0
      },
      isOpacity: {
        type: Boolean,
        default: false
      },
      wrpperHeight: {
        type: Number,
        default: 0
      },
      wrpperTop: {
        type: Number,
        default: 0
      },
      islast: {
        type: Boolean,
        default: false,
      },
      buttonActive: {
				default: null
			},
    },

    methods: {
      changePrice(data) {
        return parseFloat(data).toFixed(2)
      },
      initData() {
        this.showUnit = this.comInfor.showUnit
        this.showWsPrice = this.comInfor.showWsPrice
        this.goodsCode = this.comInfor.goodsCode//产品分类
        this.enterpriseName = this.comInfor.enterpriseName// 商家名称
        this.goodsId = parseInt(this.comInfor.goodsId) //产品ID
        this.goodsName = this.comInfor.goodsName//产品名称
        this.goodsPrice = this.comInfor.goodsPrice//产品价格
        this.goodsUnit = this.comInfor.goodsUnit//产品单位
        this.city = this.comInfor.city//产地
        this.shopName = this.comInfor.shopName//商店名称
        this.saleqty = this.comInfor.saleqty//库存
        this.goodsModel = this.comInfor.goodsModel//商品型号
        this.goodsType = this.comInfor.goodsType//售价
        this.normalPrice = this.comInfor.normalPrice//原价
        this.mainPic = this.comInfor.mainPic  //主图缩略图
        this.subTitle = this.comInfor.subTitle //二级标题
        this.inActivity = this.comInfor.inActivity
        this.goodsDeliveryType = this.comInfor.goodsDeliveryType
        this.featureLabel = parseInt(this.comInfor.featureLabel) || 0//特色标签
        this.labellistFir = this.comInfor.labellistFir
        this.labellistSec = this.comInfor.labellistSec
        this.labellistThir = this.comInfor.labellistThir
        this.eachPrice = this.comInfor.eachPrice
        this.labellistFor = this.comInfor.labellistFor
      },

      gotoDetail() {
        // var detail = this.detail
        // this.$router.push({name: 'detail', query: {code: this.goodsCode}, params: {detail: detail}})
        if(window.isApp) {
					let goBackIns = {
						type: NAVIGATE,
						params: {
							screen: 'Detail',
							params: {
								goodsCode: this.goodsCode
							}
						}
					}
					window.postMessage(JSON.stringify(goBackIns));
				} else {
					this.$router.push({
						path: 'detail',
						query: {
							code: this.goodsCode
						}
					})
				}
      },
			cartButtonOnClick() {
				if(this.isShare) {
					this.$router.push({
						name: "MiddleWare",
					})
					return
				}
				if(this.buttonActive) {
					this.buttonActive()
				} else {
					var updateCart = this.$refs.updateCart
					updateCart && updateCart.addToCart()
				}
			},
      initFeatureLabelList() {
        this.featureLabelList = new Map(
          [
            [1, ['绿色', 'green']],
            [2, ['有机', 'organic']],
            [3, ['进口', 'imported']],
            [4, ['本地', 'local']],
          ])

        var actvieFeature = this.featureLabel ? this.featureLabelList.get(this.featureLabel) : ''

        this.featureClass = actvieFeature ? actvieFeature[1] : ''
        this.featureName = actvieFeature ? actvieFeature[0] : ''
      },

      changStyle() {
        if (!this.isOpacity) {
          return true
        }
        var obj = this.$refs.listItem
        var itemTop = this.top = obj ? obj.getBoundingClientRect().top - this.wrpperTop : 0
        var height = this.height
        if (itemTop < this.wrpperHeight - 3 && itemTop + height > 0) {
          this.isShow = true
        } else {
          this.isShow = false
        }
      }
    },
    computed: {
      pagePosY() {
        var post = this.$store.state.cjy.pagePosY
        return post
      },
      isShare() {
				let share = this.$route.query.share;
				if(share) {
					return true;
				} else {
					return false
				}
			}
    },
    watch: {
      pagePosY(data) {

        this.changStyle()
      },
      comInfor() {
        this.initData()
      },
    },
    created() {
      this.initData()
    },
    mounted() {
      this.initFeatureLabelList()
      this.$nextTick(() => {
        var obj = this.$refs.listItem
        this.top = obj ? obj.offsetTop : 0
        this.height = obj ? obj.offsetHeight : 0
        this.changStyle()
      })
    },
    updated() {
      this.changStyle()
    },

  }
</script>

<style scoped>
  .cjy-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }

  .middle_line {
    padding: 0.3rem 0
  }

  .cjy-appear {
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 1;
  }

  .cjy-opacity {
    opacity: 0.2;
  }

  .cjy-aui-list-item {
    width: 100%;
    text-align: left;
    display: inline-block;
    color: #9a9a9a !important;
    background: white;
    padding: 0.8rem 0.75rem
  }

  .suggest h3 + p {
    margin-bottom: 0.2rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cjy-sec-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    float: left;
    font-size: 0.6rem;
    color: rgb(154, 154, 154);

  }

  label.delivery_time {
    line-height: initial;
    border: 1px solid #EAEAEA;
    border-radius: 0.1rem;
    color: #A0A0A0;
    padding: 0.1rem;
    font-size: 0.6rem;
    margin-right: 0.2rem;
    float: right;
    white-space: nowrap;
  }

  label.delivery_time i {
    font-size: 0.6rem;
    margin-right: 0.1rem;
  }

  .wares_list h4 {
    font-size: 0.8rem;
    font-weight: 500;
  }

  .cjy-recommend-lable {
    position: absolute;
    color: #ffffff;
    text-align: center;
    width: 2rem;
    height: 3rem;
    top: 0.1rem;
    overflow: hidden;
    z-index: 3;
    left: 0.75rem;
  }

  .cjy-recommend-lable div {
    display: block;
    background: #EF5423;
    position: absolute;
    z-index: 10;
    font-size: 0.6rem;
    line-height: 0.8rem;
    white-space: nowrap;
    width: 2rem;
    height: 1.9rem;
    padding-top: 0.2rem;
    text-align: center;

  }

  .cjy-recommend-lable-div {
    position: absolute;
    padding-top: 0.2rem;
    color: #ffffff;
    font-size: 0.6rem;
    text-align: center;
    width: 2rem;
    height: 3rem;
    top: 0.1rem;
    overflow: hidden;
    z-index: 3;
    left: 0.75rem;
    line-height: 0.8rem;

  }

  .cjy-recommend-lable :before {
    content: "";
    width: 1.6rem;
    height: 2rem;
    background: #EF5423;
    -webkit-transform: rotateZ(-70deg);
    transform: rotateZ(-70deg);
    position: absolute;
    right: -1rem;
    bottom: -0.6rem;
    z-index: 1;
  }

  .cjy-recommend-lable :after {
    content: "";
    width: 1.6rem;
    height: 2rem;
    background: #EF5423;
    -webkit-transform: rotateZ(70deg);
    transform: rotateZ(70deg);
    position: absolute;
    left: -1rem;
    bottom: -0.6rem;
    z-index: 1;
  }

  .cjy-min-screen {
  }

  @media screen and (max-width: 325px ) {
    .cjy-min-screen {
      font-size: 0.7rem !important;
    }
  }
  .cjy-add-cart-button-box {
    height: 1.6rem;
    width: 1.6rem;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
  }
</style>
